<template>
  <BaseControl
    ref="baseControlRef"
    v-bind="{ ...props }"
    editable
    :on-edit-size="handleEditFontSize"
    @on-set-style="emit('onSetStyle', $event)"
  >
  </BaseControl>
</template>

<script setup lang="ts">
import BaseControl from '@/components/BaseControl/index.vue'
import type { IBaseControlProps } from '@/components/BaseControl/types'
import { ref } from 'vue'
import { getPxValue, setPxValue } from '@/utils'

const props = defineProps<IBaseControlProps>()

const emit = defineEmits(['onSetStyle'])

//处理改变字体大小
const handleEditFontSize = ({ targetRef, moveableRef, type }: any) => {
  const value = type === 'increase' ? 1 : -1
  const fontSizeStyle = getComputedStyle(targetRef.value).fontSize
  const fontSize = getPxValue(fontSizeStyle)
  const calFontSize = fontSize + value
  if (calFontSize < 12) {
    return
  }
  targetRef.value.style.fontSize = setPxValue(calFontSize)
  moveableRef.value.updateRect()
  emit('onSetStyle', {
    fontSize: targetRef.value.style.fontSize
  })
}

const baseControlRef = ref()
const update = () => {
  return baseControlRef.value.update()
}

defineExpose({
  update
})
</script>
